import createModulePage from "../../../components/modulepage/index";

import { KxAppSubModule} from "../submodule";

import { HttpTaskTraits } from "../traits/http";

import { GLOBAL_APP_CLS } from "../../../variable";

import { pageName, componentName, refName } from "./variable";


class Module extends KxAppSubModule {
    constructor(name) {
        super(name);
    }
    _template() {
        var self = this;
        return `<div class="${self._name}">
    <div ref="${refName}" class="action app-action">
    </div>  
    <h5>辅助色</h5>
    <div class="${GLOBAL_APP_CLS}-grid-wrapper--default">
        <div class="${componentName}-color">
            <div v-for="color in colors" 
                class="${componentName}-color__item" :class="color.cls"><span>{{color.name}}</span></div>
        </div>
    </div>    
    <h5>中性色</h5>
    <div class="${GLOBAL_APP_CLS}-grid-wrapper--default">
        <div class="${componentName}-color">
            <div v-for="color in fontcolors" 
                class="${componentName}-color__item" :class="color.cls"><span>{{color.name}}</span></div>
        </div>
    </div> 
                                    
    <h5>特殊色</h5>
    <div class="${GLOBAL_APP_CLS}-grid-wrapper--default">
        <div class="${componentName}-color">
            <div v-for="color in specialcolors" 
                class="${componentName}-color__item" :class="color.cls"><span>{{color.name}}</span></div>
        </div>
    </div>                    
</div>`;
    }   
    
    _traits(instance) {
        return [ 
            new HttpTaskTraits(instance, `private_${pageName}_traits`) 
        ]
    }

    _mounted() {        
        var self = this;         
        self[`private_${pageName}_traits`].init({
            onError: function (error) {
                if (self.$refs[refName]) {
                    window.app.onError(error)
                }
            }
        });

        setTimeout(function () {
            self.search();
        }, 0);
    }
    _methods(instance) {
        return {
            search(page = 1) {
                var self = this;
            },
            onSearch(data) {
                var self = this;
                self.search();
            },
            onPageChange(page) {
                var self = this;
                self.search(page);
            }
        }
    }
    _data() {
        var ret = {};
        ret.colors = [
            "primary",
            "info",
            "success",
            "warning",
            "danger"
        ].map(function (v) {
            return {
                name: v,
                cls: `${componentName}-color__${v}`
            }
        });


        ret.fontcolors = [
            "dark",
            "light-dark",
            "sliver",
            "light-sliver",
            "gray",
            "light-gray"
        ].map(function (v) {
            return {
                name: v,
                cls: `${componentName}-color__${v}`
            }
        });

        ret.specialcolors = [
            "black",
            "orange",
            "muted"
        ].map(function (v) {
            return {
                name: v,
                cls: `${componentName}-color__${v}`
            }
        });

        return ret;
    }  
}


window.AUICustomComponents.define(`kx-app-${pageName}-module`, Module);

export default createModulePage(
    `<kx-app-${pageName}-module></kx-app-${pageName}-module>`
);